<template>
  <div class="app-container">
    <el-dialog title="查看入职人员" width="55%" :visible.sync="dialogRoyaltiesVisible" center>
      <el-table :data="entryEmpList">
        <el-table-column align="center" :show-overflow-tooltip="true" width="90" property="empName"
                         label="姓名"></el-table-column>
        <el-table-column align="center" :show-overflow-tooltip="true" width="90" property="jobNo"
                         label="工号"></el-table-column>
        <el-table-column align="center" :show-overflow-tooltip="true" width="100" property="positionType"
                         label="岗位类型">
        </el-table-column>
        <el-table-column align="center" :show-overflow-tooltip="true" width="90" property="workNature"
                         label="工作性质"></el-table-column>
        <el-table-column align="center" :show-overflow-tooltip="true" width="90" property="deptName"
                         label="部门"></el-table-column>
        <el-table-column align="center" :show-overflow-tooltip="true" width="80" property="status"
                         label="员工状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status === 4">正式</span>
            <span v-if="scope.row.status === 3">试用</span>
            <span v-if="scope.row.status === 6">离职</span>
          </template>
        </el-table-column>
        <el-table-column align="center" :show-overflow-tooltip="true" width="110" property="positionApplied"
                         label="岗位"></el-table-column>
        <!--<el-table-column align="center" :show-overflow-tooltip="true" width="140" property="enterprise"
                         label="驻场公司"></el-table-column>-->
        <el-table-column align="center" :show-overflow-tooltip="true" width="100" property="employmentDate"
                         label="入职时间">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.employmentDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" :show-overflow-tooltip="true" width="100" property="quitTime"
                         label="离职时间">
          <template slot-scope="scope">
            <span v-if="scope.row.status === 6">{{ parseTime(scope.row.quitTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" :show-overflow-tooltip="true" width="80" property="compensation"
                         label="薪资"></el-table-column>
        <el-table-column align="center" :show-overflow-tooltip="true" width="80" property="settlementPrice"
                         label="结算价"></el-table-column>
      </el-table>
      <pagination
        v-show="empTotal>0"
        :total="empTotal"
        :page.sync="empEntryParam.pageNum"
        :limit.sync="empEntryParam.pageSize"
        @pagination="getEmp"
      />
    </el-dialog>
    <el-tabs ref="tabs" v-model="activeName">
      <el-tab-pane name="first">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" width="68px">
          <el-form-item prop="name">
            <el-input
              v-model="queryParams.stationEmpName"
              placeholder="请输入搜索内容"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="sumList" style="width: 100%">
          <el-table-column align="center" type="index" label="序号"></el-table-column>
          <el-table-column align="center" prop="stationEmpName" label="姓名"></el-table-column>
          <el-table-column align="center" prop="jobNo" label="工号"></el-table-column>
          <el-table-column align="center" prop="positionApplied" label="岗位名称"></el-table-column>
          <el-table-column align="center" prop="deptName" label="所属部门"></el-table-column>
          <el-table-column align="center" prop="sumGrossMargin" label="总毛利"></el-table-column>
          <el-table-column align="center" prop="date" label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="getInfo(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane name="second">
        <el-dialog title="编辑" width="55%" :visible.sync="editVisible" center>
          <el-form :inline="true" style="text-align: center" :model="grossMarginForm" class="demo-form-inline">
            <el-form-item label="毛利（￥）">
              <el-input oninput="value=value.replace(/[^\d]/g,'')" @input="inputRoyalties" style="width: 100px"
                        v-model="grossMarginForm.grossMargin"></el-input>
            </el-form-item>
            <el-form-item label="提成比例（%）">
              <el-input :disabled="true" style="width: 100px" v-model="grossMarginForm.ratio"></el-input>
            </el-form-item>
            <el-form-item label="提成金额（￥）">
              <el-input :disabled="true" style="width: 100px" v-model="grossMarginForm.royalties"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">提交</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
        <div>
          <el-button @click="onBack">返回</el-button>
          <span style="font-size: 20px;margin-left: 20px">提成详情</span>
        </div>
        <div style="margin: 30px">
          <i class="el-icon-user-solid"></i>&nbsp;
          <span style="font-size: 20px">员工信息</span>
          <hr>
          <br>
          <el-descriptions style="font-size: 18px;margin-left: 30px">
            <el-descriptions-item label="姓名">{{ itoSalesmanRoyaltiesListVO.infoVO.empName }}</el-descriptions-item>
            <el-descriptions-item label="工号">{{ itoSalesmanRoyaltiesListVO.infoVO.jobNo }}</el-descriptions-item>
            <el-descriptions-item label="部门">{{ itoSalesmanRoyaltiesListVO.infoVO.deptName }}</el-descriptions-item>
            <el-descriptions-item label="电话">{{ itoSalesmanRoyaltiesListVO.infoVO.phone }}</el-descriptions-item>
            <el-descriptions-item label="岗位">{{
                itoSalesmanRoyaltiesListVO.infoVO.positionApplied
              }}
            </el-descriptions-item>
            <el-descriptions-item label="工作性质">{{ itoSalesmanRoyaltiesListVO.infoVO.workNature }}</el-descriptions-item>
          </el-descriptions>
          <br>
          <i class="el-icon-s-grid"></i>&nbsp;
          <span style="font-size: 20px">销售提成</span>
          <hr>
          <br>
          <el-table :data="itoSalesmanRoyaltiesListVO.royaltiesVOS" style="width: 100%">
            <el-table-column prop="createTime" align="center" label="月份">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createTime, '{y}-{m}') }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="staffOnActiveDuty" align="center" label="在职人员"></el-table-column>
            <el-table-column prop="grossMargin" align="center" label="毛利"></el-table-column>
            <el-table-column prop="ratio" align="center" label="提成比例">
              <template slot-scope="scope">
                <span>{{ scope.row.ratio + '%' }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="royalties" align="center" label="提成金额"></el-table-column>
            <el-table-column prop="status" align="center" label="状态">
              <template slot-scope="scope">
                <span v-if="scope.row.status === '0'">未发放</span>
                <span v-if="scope.row.status === '1'">已发放</span>
              </template>
            </el-table-column>
            <el-table-column prop="grantTime" align="center" label="发放日期">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.grantTime, '{y}-{m}') }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" width="200" label="操作">
              <template slot-scope="scope">
                <el-button type="text" v-if="scope.row.status === '0'" @click="editGrossMargin(scope.row)">编辑</el-button>
                <el-button type="text" v-if="scope.row.status === '0'" @click="synchronizationSalary(scope.row)">确认发放</el-button>
                <el-button type="text" @click="getEmpListById(scope.row)">入职人员</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
  import {
    list,
    getSalesmanRoyaltiesInfo,
    getEmpList,
    changeRoyalties,
    updateSalesmanRoyalties,
    synchronizationSalary
  } from "@/api/system/salesmanRoyalties";
  import Template from "@/views/system/email/ItoTemplate";
  import moment from "moment"

  export default {
    name: "",
    components: {Template},
    data() {
      return {
        editVisible: false,
        dialogRoyaltiesVisible: false,
        entryEmpList: [],
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          stationEmpName: ''
        },
        sumList: [],
        activeName: 'first',
        empTotal: 0,
        itoSalesmanRoyaltiesListVO: {
          infoVO: {},
          royaltiesVOS: []
        },
        salesmanRoyaltiesInfoParams: {
          pageNum: 1,
          pageSize: 10,
          stationEmpId: undefined
        },
        empEntryParam: {
          pageNum: 1,
          pageSize: 10,
          createTime: undefined,
          empId: undefined
        },
        grossMarginForm: {
          empId: undefined,
          royaltiesId: undefined,
          grossMargin: 0.00,
          ratio: 0,
          royalties: 0.00
        },
      }
    },
    created() {
      this.getList()
    },
    methods: {
      synchronizationSalary(row) {
        this.$confirm('是否确认发放当月招聘提成', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          synchronizationSalary(row.id, row.stationEmpId, row.royalties).then(res => {
            this.getInfoList();
            this.$message({
              type: 'success',
              message: '已发放!'
            });
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消发放'
          });
        });

      },
      getList() {
        list(this.queryParams).then(res => {
          this.sumList = res.rows
        })
      },
      handleQuery() {
        this.getList()
      },
      resetQuery() {
        this.queryParams.pageNum = 1
        this.queryParams.stationEmpName = ''
        this.getList()
      },
      getInfo(row) {
        this.salesmanRoyaltiesInfoParams.stationEmpId = row.empId
        this.activeName = 'second'
        this.getInfoList();
      },
      getInfoList() {
        getSalesmanRoyaltiesInfo(this.salesmanRoyaltiesInfoParams).then(res => {
          this.itoSalesmanRoyaltiesListVO = res.data
        })
      },
      onBack() {
        this.getList()
        this.activeName = 'first'
        this.itoSalesmanRoyaltiesListVO = {
          infoVO: {},
          royaltiesVOS: []
        }
      },
      editGrossMargin(row) {
        this.grossMarginForm.empId = row.stationEmpId
        this.grossMarginForm.royaltiesId = row.id
        this.grossMarginForm.grossMargin = row.grossMargin
        this.grossMarginForm.ratio = row.ratio
        this.grossMarginForm.royalties = row.royalties
        this.editVisible = true
      },
      preMonth(date) {
        let startDate = moment(date).subtract(1, "month").startOf("month").format("yyyy-MM")
        return startDate
      },
      getEmpListById(row) {
        this.empEntryParam.createTime = this.preMonth(row.createTime)
        this.empEntryParam.empId = this.itoSalesmanRoyaltiesListVO.infoVO.empId
        this.getEmp()
        this.dialogRoyaltiesVisible = true
      },
      getEmp() {
        getEmpList(this.empEntryParam).then(res => {
          this.entryEmpList = res.rows
          this.empTotal = res.total
        })
      },
      onSubmit() {
        updateSalesmanRoyalties(this.grossMarginForm).then(res => {
          this.getInfoList();
          this.editVisible = false
          this.$message({
            type: 'success',
            message: '已保存!'
          });
        })
      },
      inputRoyalties() {
        changeRoyalties(this.grossMarginForm).then(res => {

          this.grossMarginForm.ratio = res.data.ratio
          this.grossMarginForm.royalties = res.data.royalties
        }).catch((e) => {
          if (e !== undefined) {
            this.grossMarginForm.grossMargin = this.grossMarginForm.grossMargin.slice(0, this.grossMarginForm.grossMargin.length - 1)
          }
        })
      }
    },
    mounted() {
      //tab标签的权限控制
      this.$nextTick(() => {
        //首先把所有的都隐藏
        this.$refs.tabs.$children[0].$refs.tabs[0].style.display = 'none';
        this.$refs.tabs.$children[0].$refs.tabs[1].style.display = 'none';
      });
    }
  }
</script>

<style scoped>

</style>
